import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

// vite的相关配置
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  // 如果是两个参数则读取我们配置在 .env.mode的环境变量；加第三个参数 ”“ 则当前主机的全量环境变量配置
  const env = loadEnv(mode, process.cwd());
  console.log("读取.env中配置的环境变量", env);
  // 读取运行模式，如果是dev运行 "dev": "vite --mode development", 则mode为development
  console.log("读取mode变量", mode);
  // process.cwd() 可以获取当前工作目录，例如 D:\Git\Git-Repository\vue3-template-web
  console.log("读取工作路径变量", process.cwd());
  console.log(env.VITE_APP_BASE_URL);
  console.log("参数command",command);
  return {
    plugins: [vue()],
    // 此处配置项目服务参数
    server: {
      host: "0.0.0.0", // 项目运行地址，此处代表localhost
      port: 3001, // 项目运行端口
      open: true, //编译之后是否自动打开页面
      hmr: true, // 是否开启热加载
      https: false, // 是否开启https模式
      cors: true, // 是否开启跨域
      // 设置代理,代理所有从vite发出的url中带/api的请求
      proxy: {
        '^/api/.*': {
          // url请求路径匹配 /api
          target: env.VITE_APP_BASE_URL, // 匹配上则转发到target 目标Host
          // 将vite服务的Host更改为target目标 URL ，如果不设置true则发出的请求Host依旧是vite服务的Host
          changeOrigin: true,
          // 路径重写，剔除/api，然后将剩余的path拼接到target后，组成最终发出去请求
          // path 参数代表的是端口后的路径，例如http://localhost:6666/api/userInfo ，则path代表/api/userInfo
          rewrite: (path: string) => path.replace(/^\/api/, ''),
        },
      },
    },
    // 配置src的别名@
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
      },
    },
  };
});
